import { Component } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
import {OnInit} from '@angular/core';


@Component({
	selector: 'my-heroes',
	template: `
	<h2>{{title}}</h2>
	<ul class="heroes">
	<a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]">
	
	<li class="badge">{{hero.id}} ---{{hero.name}}</li>
	</a>
	</ul>
	<my-hero-detail [hero]="selectedHero"></my-hero-detail>
	`,
})
export class HeroesComponent implements OnInit { 
	
	title:String = '英雄们';
	heroes:Hero[];

	constructor(private heroService:HeroService){
		
	}
	getHeros():void{
		this.heroService.getHeroes().then((hs)=>{this.heroes=hs;});
	}
	ngOnInit():void{
		this.getHeros();
	}

}
